<template>
    <PageLayout title="我的信息" >
        <scroll-view class="list-box" >
            <view class="empty-view" v-if="messageList.length==0">
                <up-empty mode="message" :height="200" icon=""></up-empty>
            </view>
            
            <up-cell-group border>
                <up-cell v-for="(message,idx) in messageList" :key="'selItem-'+idx" border @click="handlerToMessage(message)" >
                    <template #title>
                        <view class="message-item" :class="{'new':message.isRead=='N'}">
                            <view>{{message.title}}</view>
                            <view class="tips">{{message.message}}</view>
                        </view>
                    </template>
                    <template #value>
                        <view class="item-right">
                            <view class="time">{{message.createdAt}}</view>
                            <up-badge :isDot="true" type="error" :show="message.isRead=='N'"></up-badge>
                        </view>
                    </template>
                </up-cell>
            </up-cell-group>
        </scroll-view>
    </PageLayout>
</template>

<script lang="ts" setup>
    import {ref} from "vue"
    import PageLayout from '../components/myLayout/PageLayout.vue';
    import { listMyMessageReq } from "../http/projectMessage";

    const messageList=ref([{},{}])

    const handlerToMessage=(item)=>{
        let page="/pages/message/detail"
        if(item.toPage){
            page=item.toPage
        }
        item.isRead="Y"
        uni.navigateTo({
			url:page,
			success:(res)=> {
				res.eventChannel.emit("readMessage",{messageId:item.id})
			}
        })
    }

    const getMessageList=()=>{
        listMyMessageReq({}).then(res=>{
            messageList.value=res.data.list
        })
    }

    getMessageList()

</script>

<style lang="scss" scoped>
    
    .list-box{
        height: 100%;
    }
    .empty-view{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .message-item{
        font-size: 22upx;
        line-height: 40upx;
        .tips{
            color: $uni-text-color-grey;
            width: 70vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .item-right{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .time{
            font-size: 18upx;
            margin-bottom: 22upx;
        }
    }

    .new{
        font-weight: bold;
    }

</style>